/*
 * @Description: 
 * @Autor: zhangbing
 * @Date: 2021-06-15 14:44:23
 * @LastEditors: zhangbing
 * @LastEditTime: 2021-06-15 22:01:30
 */
import React, { Component } from 'react'

export default class ToDoItem extends Component {
    handleCheck = (id) => {
       return (event) => this.props.updateToDo(id, event.target.checked)
    }
    handleDelete = (id) => {
        return () => this.props.deleteToDo(id)
    }
    render() {
        const {todo} = this.props
        return (
            <div style={{display: 'flex', justifyContent: 'space-between', marginBottom: '30px', marginTop:'30px'}}>
                <label>
                <input type='checkbox' checked={todo.done} onChange={this.handleCheck(todo.id)}/>
                <span>{todo.things}</span>
                </label>
                <span>
                    <button  style={{border:'none', backgroundColor:'red', color:'white'}} onClick={this.handleDelete(todo.id)}>删除</button>
                </span>
            </div>
        )
    }
}

